<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-icon blue">
            <el-icon><Van /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-title">在售车辆</div>
            <div class="card-value">{{ statistics.carCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-icon green">
            <el-icon><User /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-title">注册用户</div>
            <div class="card-value">{{ statistics.userCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-icon orange">
            <el-icon><ShoppingCart /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-title">交易数量</div>
            <div class="card-value">{{ statistics.transactionCount }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-icon red">
            <el-icon><Shop /></el-icon>
          </div>
          <div class="card-content">
            <div class="card-title">经销商数量</div>
            <div class="card-value">{{ statistics.dealerCount }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>热门车辆</span>
            </div>
          </template>
          <div class="popular-cars">
            <el-table :data="popularCars" style="width: 100%" :show-header="false">
              <el-table-column width="50">
                <template #default="scope">
                  <el-tag :type="scope.$index < 3 ? 'danger' : 'info'" size="small">{{ scope.$index + 1 }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="title" label="车辆名称"></el-table-column>
              <el-table-column prop="views" label="浏览量" width="80"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>最新交易</span>
            </div>
          </template>
          <div class="latest-transactions">
            <el-table :data="latestTransactions" style="width: 100%">
              <el-table-column prop="carTitle" label="车辆" width="180"></el-table-column>
              <el-table-column prop="price" label="成交价(万)" width="100"></el-table-column>
              <el-table-column prop="date" label="日期"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt20">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>近期预约</span>
            </div>
          </template>
          <div class="appointments">
            <el-table :data="appointments" style="width: 100%">
              <el-table-column prop="customerName" label="客户" width="120"></el-table-column>
              <el-table-column prop="carTitle" label="车辆"></el-table-column>
              <el-table-column prop="appointmentTime" label="预约时间" width="180"></el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Van, User, ShoppingCart, Shop } from '@element-plus/icons-vue'

// 统计数据
const statistics = ref({
  carCount: 156,
  userCount: 3204,
  transactionCount: 126,
  dealerCount: 23
})

// 热门车辆
const popularCars = ref([
  { id: 1, title: '奔驰 E300L 2023款', views: 1265 },
  { id: 2, title: '宝马 5系 530Li 2023款', views: 1086 },
  { id: 3, title: '奥迪 A6L 2023款', views: 954 },
  { id: 4, title: '特斯拉 Model Y', views: 876 },
  { id: 5, title: '比亚迪 汉 2023款', views: 765 }
])

// 最新交易
const latestTransactions = ref([
  { id: 1, carTitle: '奔驰 C260L', price: 38.6, date: '2023-11-15' },
  { id: 2, carTitle: '宝马 3系 320Li', price: 32.5, date: '2023-11-14' },
  { id: 3, carTitle: '丰田 凯美瑞', price: 25.8, date: '2023-11-13' },
  { id: 4, carTitle: '本田 雅阁', price: 23.6, date: '2023-11-12' }
])

// 近期预约
const appointments = ref([
  { id: 1, customerName: '张三', carTitle: '宝马 5系 530Li', appointmentTime: '2023-11-20 14:30', status: '0' },
  { id: 2, customerName: '李四', carTitle: '奔驰 E300L', appointmentTime: '2023-11-21 10:00', status: '1' },
  { id: 3, customerName: '王五', carTitle: '奥迪 A6L', appointmentTime: '2023-11-22 15:30', status: '0' },
  { id: 4, customerName: '赵六', carTitle: '特斯拉 Model 3', appointmentTime: '2023-11-19 09:30', status: '2' }
])

// 获取状态标签类型
function getStatusType(status) {
  switch (status) {
    case '0': return 'info'
    case '1': return 'success'
    case '2': return 'warning'
    case '3': return 'danger'
    default: return 'info'
  }
}

// 获取状态文本
function getStatusText(status) {
  switch (status) {
    case '0': return '待确认'
    case '1': return '已确认'
    case '2': return '已完成'
    case '3': return '已取消'
    default: return '未知'
  }
}

// 获取数据
onMounted(() => {
  // 这里应该从API获取数据，现在使用模拟数据
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  
  .mt20 {
    margin-top: 20px;
  }
  
  .dashboard-card {
    display: flex;
    align-items: center;
    height: 100px;
    
    .card-icon {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      
      .el-icon {
        font-size: 30px;
        color: #fff;
      }
      
      &.blue {
        background-color: #409EFF;
      }
      
      &.green {
        background-color: #67C23A;
      }
      
      &.orange {
        background-color: #E6A23C;
      }
      
      &.red {
        background-color: #F56C6C;
      }
    }
    
    .card-content {
      .card-title {
        font-size: 16px;
        color: #909399;
        margin-bottom: 5px;
      }
      
      .card-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
      }
    }
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    span {
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style> 